<template>
  <div class="tabs-container">
    <a-menu
      mode="inline"
      theme="dark"
      :openKeys="openKeys"
      @openChange="onOpenChange"
      style="width: 100%">
      <a-sub-menu v-for="item in navigation" :key="item.name" class="without-children" v-if="!item.children || item.children.length <= 0" :id="item.path" @click.native="navToPage($event)">
        <span class="active" slot="title"><img :src="item.icon" alt="" srcset=""><span>{{item.name}}</span></span>
      </a-sub-menu>
      <a-sub-menu v-for="item in navigation" :key="item.name" v-if="item.children && item.children.length >= 1">
        <span class="active" slot="title"><img :src="item.icon" alt=""><span>{{item.name}}</span></span>
        <a-menu-item v-for="subItem in item.children" :key="subItem.name">
          <router-link :to="subItem.path">{{subItem.name}}</router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
import { Menu, Icon } from 'ant-design-vue'
import { navigation, keyList } from './tab_tree'

export default {
  data () {
    return {
      rootSubmenuKeys: keyList,
      openKeys: [keyList[0]],
      navigation
    }
  },
  mounted() {
    
  },
  methods: {
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    },
    navToPage(ev) {
      let path = ev.currentTarget.id
      this.$router.push(path.toString())
    }
  },
  components: {
    AMenu: Menu,
    ASubMenu: Menu.SubMenu,
    AIcon: Icon,
    AMenuItem: Menu.Item
  }
}
</script>

<style lang='less'>

/* 重置tab样式 */
.ant-menu-inline {
  background: transparent;
  border-right: 0;
}

.ant-menu-submenu-title {
  margin-bottom: 0 !important;
  padding-left: 0 !important;
  display: flex;
  box-sizing: border-box;
  color: @white;
  box-sizing: border-box;
  border-left: 3px solid transparent;

  .anticon {
    color: #82e7fa;
    margin-left: 20/@rem;
  }

  .active {
    margin-left: 22/@rem;
    display: flex;
    align-items: center;

    img {
      width: 20/@rem;
      height: 20/@rem;
      margin-right: 10/@rem;
    }
  }
}

.ant-menu-item {
  margin: 0 !important;
  padding-left: 0 !important;
}

.ant-menu-submenu-arrow {
  color: @white;
}

.ant-menu-sub {
  background: #1abdde !important;
  box-shadow: none !important;
}

.ant-menu-item-selected {
  background: #33c5e1 !important;
}

.ant-menu-submenu-open {
  .ant-menu-submenu-title {
    background: #00accf !important;
    box-sizing: border-box;
    border-left: 3px solid #82e7fa;
  }
}

/* tab样式 */
.tabs-container {
  width: 100%;
  display: flex;
  flex-grow: 1;
  overflow-y: scroll;
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.without-children {
  .ant-menu-submenu-arrow {
    display: none;
  }
}

.ant-menu-dark, .ant-menu-dark .ant-menu-sub {
  background: transparent !important;
}
</style>
